<template>
  <div class="v-md-plugin-tip tip">
    <p class="v-md-plugin-tip-title">跨轨道放置网格项目</p>
    <p>
      &#10004;&emsp; 如果盒子里有文字并且设置grid。那么文字也是会单独占用一个单元格的！
    </p>
  </div>
  <div class="wrapper">
    <div class="box1">
      <!-- 如果有文字 'one' 也会占用一个格子的 -->
      <span>a</span>
      <span>b</span>
      <span>c</span>
      <span>d</span>
    </div>
    <div class="box2">two</div>
    <div class="box3">three</div>
    <div class="box4">four</div>
    <div class="box5">five</div>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4px;
  row-gap: 4px;
  span {
    padding: 4px;
    background-color: indianred;
    border: 2px dashed #fff;
  }
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
</style>